<template>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 24px;color: white">目录</span>
        </div>
        <div v-for="chapter in chapterList" :key="chapterList.chapterId" class="text item">
          <el-link target="_blank" style="color: black" @click="action(chapter.chapterUrl)">{{chapter.chapterName}}</el-link>
        </div>
      </el-card>
    </div>
</template>

<script>
    export default {
        name: "chapterInfo",
        data(){
          return{
            chapterList:[
              {
                chapterId:'',
                chapterName:'',
                chapterOrder:'',
                chapterDesc:'',
                chapterCreatetime:'',
                courseId:'',
                chapterUrl:''
              }
            ]
          }
        },
        methods: {
          findAll(){
            this.$axios.get('/chapter/findByCourseId?courseId=1').then(res=>{
              console.log('-------------->',res.data)
              this.chapterList=res.data;
            })
          },
          action(chapterUrl){
            location.href=chapterUrl;
          }
        },
      mounted(){
          this.findAll();
      }
    }
</script>

<style scoped>
  .text {
    font-size: 20px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    background-color: lightslategrey;
    width: 500px;
    float: right;
  }
</style>
